<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
		<!--注意:vue-resource 必须放在 vue之后-->
		<script type="text/javascript" src="../js/vue-resource-1.5.1.js" ></script>
	</head>
	<body>
		<!--
        	使用说明: 相关API参考：https://github.com/pagekit/vue-resource
				https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
        	使用为 $http....
        	
        	配置根路径:https://github.com/pagekit/vue-resource/blob/develop/docs/config.md
        		使用代码: Vue.http.options.root = '根路径地址'; 
        		说明:要想跟路径在以后的http请求中生效,则 http请求的url应该是相对路径,前面不能带 / ，
        			否则不会启用你设置的根路径，而会以项目本身的路径请求.
        		
        -->
		<div id="app">
			<input type="button" value="get请求" @click="gitInfo" />
			<input type="button" value="post请求" @click="postInfo" />
			<input type="button" value="josnP请求" @click="jsonPInfo" />
		</div>
	</body>
	<script>
		var vue=new Vue({
			el:"#app",
			data:{
				
			},
			methods:{
				gitInfo(){
					//发送get 请求
					this.$http.get('http://vue.studyit.io/api/getlunbo').then(function(result){
						console.log(result.body);
					});
				},
				postInfo(){
					/*
					 * 发送post请求:
					 * 		手动发起Post请求，默认是没有表单格式的，所以服务器可能无法处理
					 * 		可以通过 post 方法的第三个参数，{ emlateJSON:true} 设置 提交的内容类型 为普通表单数据格式
					 * 
					 * 第一个参数:url
					 * 第二个参数：body
					 * 第三个参数：请求头的相关设置
					 */					
					 /*
					  * 说明:如果不想每次以表单形式发送 post请求时，都配置 emulateJSON:true ;则可进行全局的配置
					  * 	代码如下:Vue.http.options.emulateJSON = true;
					  */
					this.$http.post('http://vue.studyit.io/api/post',{},{emulateJSON:true}).then(result=>{
						console.log(result.body);
					})
				},
				jsonPInfo(){
					//发起jsonP请求
					this.$http.post('http://vue.studyit.io/api/jsonp').then(result=>{
						console.log(result.body);
					})
				}
			}
		});
	</script>
</html>